var icon, ctx;
/*

--SHAPE--
fillRect(x,y,width,height) : Draws a filled rectangle
fillText(str,x,y)
strokeRect(x,y,width,height) : Draws a rectangular outline
clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent
roundedRect(ctx, x, y, w, h, r); 

arc(x, y, radius, startAngle, endAngle, anticlockwise)

--FONT--
font = CSS-Font

beginPath()
closePath()
stroke()
fill()

--PATH--
moveTo(x, y)
lineTo(x, y)
quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
rect(x, y, width, height)


--IMAGE--
var img = new Image();   // Create new Image object  
img.onload = function(){  
  // execute drawImage statements here  
}  
img.src = 'myImage.png'; // Set source path  
drawImage(image,x,y);
drawImage(image, x, y, width, height) 
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) : s=source,d=destination

--COLORS--
fillStyle = color
strokeStyle = color
globalAlpha = transparency value

--LINES--
lineWidth = value
lineCap = type
lineJoin = type
miterLimit = value

*/

function loadCanvas(){
    ctx = icon.getContext("2d");
    ctx.fillStyle = "rgb(200,0,0)";  
    ctx.fillRect (0, 0, 19, 19);
}
function setText(text){
    
}


function roundedRect(ctx,x,y,width,height,radius){
  ctx.beginPath();
  ctx.moveTo(x,y+radius);
  ctx.lineTo(x,y+height-radius);
  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
  ctx.lineTo(x+width-radius,y+height);
  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
  ctx.lineTo(x+width,y+radius);
  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
  ctx.lineTo(x+radius,y);
  ctx.quadraticCurveTo(x,y,x,y+radius);
  ctx.stroke();
}
